

<template>
  <div>
    <div class="tempxyz modeltale" style="display: flex">
      <CCard class="leftTree">
        <CCardHeader>
          <Dropdown @on-click="algoDropdownMenuChange">
            <CButton
              type="primary"
              data-permission="Btn_sfgl_AddALG"
              class="btnstyle textBtnStyle system-btn-style"
            >
              算法
              <Icon type="ios-arrow-down"></Icon>
            </CButton>
            <DropdownMenu slot="list">
              <DropdownItem name="add">新增</DropdownItem>
              <DropdownItem name="import">导入</DropdownItem>
            </DropdownMenu>
          </Dropdown>

          <CButton
            title="排序"
            color="info"
            class="btnstyle textBtnStyle system-btn-style"
            @click="dragSortClick('tree')"
            :disabled="!disableButton"
            data-permission="Btn_sfgl_Sort"
            :class="{ disableTextBtn: !disableButton }"
          >排序</CButton>
          <div>
            <!-- <CButton
              title="添加同级"
              variant="outline"
              color="primary"
              @click="addTreeNode"
              class="btn btnRow"
              data-permission="Btn_ALG_AddSC"
            >
              <img
                class="changeimg featuresstyle"
                src="@/assets/icons/增加同级.svg"
                alt
              />
            </CButton>
            <CButton
              title="添加子级"
              variant="outline"
              color="primary"
              class="btnRow"
              @click="addCatalog"
              data-permission="Btn_ALG_AddC"
            >
              <img
                class="changeimg featuresstyle"
                src="@/assets/icons/添加子级别.svg"
                alt
              />
            </CButton>
            <CButton
              title="编辑"
              variant="outline"
              color="info"
              class="btnRow"
              @click="update"
              data-permission="Btn_ALG_UpC"
            >
              <img
                class="changeimg featuresstyle"
                src="@/assets/icons/edit.svg"
                alt
              />
            </CButton>
            <CButton
              title="删除"
              variant="outline"
              color="danger"
              class="btnRow"
              @click="delTreeNode"
              data-permission="Btn_ALG_DelC"
            >
              <img
                class="changeimg featuresstyle"
                src="@/assets/icons/delete.svg"
                alt
              />
            </CButton>-->
            <CButton
              horizontal
              title="添加同级"
              variant="outline"
              class="leftTextBtnStyle system-btn-style"
              @click="addTreeNode"
              data-permission="Btn_sfgl_AddSC"
            >
              <CIcon name="cil-plus" />同级
            </CButton>
            <CButton
              title="添加子级"
              variant="outline"
              class="leftTextBtnStyle system-btn-style"
              @click="addCatalog"
              data-permission="Btn_sfgl_AddC"
            >
              <CIcon name="cil-plus" />子级
            </CButton>

            <CButton
              title="编辑"
              variant="outline"
              class="leftTextBtnStyle system-btn-style"
              @click="update"
              data-permission="Btn_sfgl_UpC"
            >编辑</CButton>
            <CButton
              title="删除"
              variant="outline"
              class="leftTextBtnStyle system-btn-style"
              @click="delTreeNode"
              data-permission="Btn_sfgl_DelC"
            >删除</CButton>
          </div>
        </CCardHeader>
        <!-- <CRow> -->
        <CCardBody class="cbodystyle" style="height: calc(100% - 125px) !important">
          <div>
            <Tree
              :data="treeData"
              ref="tree"
              :render="renderContent"
              @on-select-change="selectTree"
            ></Tree>
          </div>
        </CCardBody>
      </CCard>
      <CCard class="rightCard">
        <CCardHeader class="header-wraper">
          <div class="header-left-titleWraper">
            <span class="textTitle">算法列表：{{ this.listName }}</span>
          </div>
          <div class="header-right-wraper">
            <Select
              v-model="queryType"
              style="width: 100px; margin-right: 4px"
              @on-change="searchChange"
            >
              <Option
                v-for="item in queryTypeOptions"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}</Option>
            </Select>

            <div class="search-wrapper">
              <CInput
                placeholder="搜索..."
                v-model="searchName"
                class="input-search-style"
                v-on:keyup="check_count($event)"
                maxlength="50"
                @keyup.enter="enterfaction"
              />
              <!-- 搜索 -->
              <!-- <img
                class="iconstyleoff"
                src="../../../public/img/search.png"
                v-if="showimgsearchicon"
                @click="search"
                alt
              />-->
              <!-- 清除 -->
              <!-- <img
                class="iconstyleoff"
                src="@/assets/icons/clear.png"
                v-if="showimgofficon"
                @click="clearmess"
                alt
              />-->
              <CButton @click="enterfaction" color="info" class="header-search system-btn-style">搜索</CButton>
            </div>
            <CButton
              title="排序"
              color="info"
              class="header-main-btn system-btn-style"
              @click="dragSortClick('table')"
              :disabled="disableButton"
              :class="{ disableTextBtn: disableButton }"
              data-permission="Btn_ALG_Sort"
            >排序</CButton>
          </div>
          <!-- </div> -->
        </CCardHeader>
        <CCardBody class="card-body">
          <div style="height: calc(100% - 45px)">
            <TableList
              ref="table"
              :getColumn="getColumns"
              :getAxios="getAxios"
              :allDataList.sync="allDataList"
            >
              <template v-slot:show_detailsImg="item">
                <span v-if="item.data.row.type == 'java'">Java</span>
                <span v-if="item.data.row.type == 'python'">Python</span>
                <span v-if="item.data.row.type == 'command'">C++</span>
              </template>

              <template v-slot:classifyName="item">
                <span>{{ item.data.row.classifyNameFirst }}</span>
                <span
                  v-if="item.data.row.classifyNameSecond"
                >>>{{ item.data.row.classifyNameSecond }}</span>
              </template>
              <template v-slot:show_details="item">
                <CButton
                  title="编辑"
                  class="textBtnStyle onButton system-btn-style"
                  @click="updateAlgoBtn(item.data.row, item.data.index)"
                  data-permission="Btn_sfgl_UpALG"
                >编辑</CButton>
                <CButton
                  title="查看"
                  class="textBtnStyle onButton system-btn-style"
                  @click="write(item.data.row, item.data.index)"
                  data-permission="Btn_sfgl_ck"
                >查看</CButton>
                <CButton
                  title="迁移"
                  class="textBtnStyle onButton system-btn-style"
                  @click="move(item.data.row)"
                  data-permission="Btn_sfgl_TransALG"
                >迁移</CButton>
                <CButton
                  title="下载"
                  class="textBtnStyle onButton system-btn-style"
                  @click="downloadAlgoBtn(item.data.row, item.data.index)"
                  data-permission="Btn_sfgl_UpALG"
                >下载</CButton>
                <CButton
                  title="复制"
                  class="textBtnStyle onButton system-btn-style"
                  @click="copyAlgoBtn(item.data.row, item.data.index)"
                  data-permission="Btn_sfgl_fz"
                >复制</CButton>
                <CButton
                  title="删除"
                  class="textBtnStyle onButton system-btn-style"
                  @click="delModel(item.data.row)"
                  data-permission="Btn_sfgl_DelAlg"
                >删除</CButton>
              </template>
            </TableList>
          </div>
        </CCardBody>
      </CCard>
    </div>
    <!-- 添加算法弹窗 -->
    <div v-show="reFresh">
      <Modal
        v-model="addingAlgorithm"
        draggable
        scrollable
        :closable="false"
        title="添加算法"
        :width="800"
        class="dragSortStyle"
        :styles="modalStyle"
      >
        <p slot="header" class="modalHeader">添加算法</p>
        <Form :model="uploadModelForm" :label-width="95">
          <!-- <div style="flex-flow: column;"> -->
          <div style="display: flex; height: 40px">
            <div class="formstyle">
              <FormItem label="算法分类" required>
                <Cascader
                  :data="dataCascader"
                  change-on-select
                  filterable
                  v-model="uploadModelForm.upLoadModelCateid"
                ></Cascader>
                <!-- v-model="algSelect" -->
                <!-- uploadModelForm.upLoadModelCateid -->
              </FormItem>
            </div>
            <div class="uploadstyle">
              <div class="popstyle">
                <Poptip v-show="!algSelect && !uploading" trigger="hover" title>
                  <Button
                    type="primary"
                    icon="ios-cloud-upload-outline"
                    class="system-btn-style"
                  >单文件上传</Button>
                  <div slot="content" class="soltstyle">请先选择算法分类！</div>
                </Poptip>

                <Upload :before-upload="upLoad" multiple action v-show="algSelect && !uploading">
                  <Button
                    type="primary"
                    icon="ios-cloud-upload-outline"
                    @click="clearFilesList"
                    class="system-btn-style"
                  >单文件上传</Button>
                </Upload>

                <!-- <Progress v-show="uploading" :percent="counter" :stroke-width="20" text-inside /> -->
                <Upload
                  multiple
                  ref="uploadFilePl"
                  :before-upload="upDataFile"
                  :show-upload-list="false"
                  action="#"
                >
                  <Button
                    @click="clearFilesList"
                    type="primary"
                    :disabled="buttonDis"
                    icon="ios-cloud-upload-outline"
                    style="margin-left: 10px"
                    class="system-btn-style"
                  >批量上传</Button>
                </Upload>
              </div>
            </div>
            <!-- <bigfileupload class="bigFileUpload-style"></bigfileupload> -->
          </div>
          <div style="text-align: center; margin: 12px">
            <Progress v-show="uploading" :percent="counter" :stroke-width="20" text-inside />
          </div>
        </Form>
        <div v-if="uploadingSuccess" v-show="showDataTbale">
          <p class="tableTitle" style>基本信息</p>
          <CForm class="formSty">
            <CRow>
              <CCol sm="6">
                <CInput
                  label="算法标识"
                  readonly
                  horizontal
                  v-model="tableDatas.algId"
                  class="InputText"
                />
              </CCol>
              <CCol sm="6">
                <CInput
                  label="版本"
                  readonly
                  horizontal
                  v-model="tableDatas.version"
                  class="InputText"
                />
              </CCol>
            </CRow>
            <CRow>
              <CCol sm="6">
                <CInput
                  label="算法执行类型"
                  readonly
                  horizontal
                  v-model="tableDatas.type"
                  class="InputText"
                />
              </CCol>
              <CCol sm="6">
                <CInput
                  label="算法名称"
                  readonly
                  horizontal
                  v-model="tableDatas.name"
                  class="InputText"
                />
              </CCol>
            </CRow>
            <CRow>
              <CCol sm="6">
                <CInput
                  label="算法简称"
                  readonly
                  horizontal
                  v-model="tableDatas.abbrev"
                  class="InputText"
                />
              </CCol>
              <CCol sm="6">
                <CInput
                  label="算法描述"
                  readonly
                  horizontal
                  v-model="tableDatas.desc"
                  class="InputText"
                />
              </CCol>
            </CRow>
            <CRow></CRow>
            <CRow>
              <CCol sm="6">
                <CInput
                  label="影像标签"
                  readonly
                  horizontal
                  v-model="tableDatas.label"
                  class="InputText"
                />
              </CCol>
              <CCol sm="6">
                <CInput
                  label="提供单位"
                  readonly
                  horizontal
                  v-model="tableDatas.owner"
                  class="InputText"
                />
              </CCol>
            </CRow>
            <CRow>
              <CCol sm="6">
                <CInput
                  label="资源配置"
                  readonly
                  horizontal
                  v-model="tableDatas.Resource"
                  class="InputText"
                />
              </CCol>
              <CCol sm="6">
                <CInput
                  label="支持操作系统"
                  readonly
                  horizontal
                  v-model="tableDatas.os"
                  class="InputText"
                />
              </CCol>
            </CRow>
          </CForm>
        </div>
        <div v-if="fileList.length != 0" class="statsBox">
          <div
            v-for="(item, index) in fileList"
            :key="index"
            style="display: flex"
            class="fileStatus"
          >
            <span style="margin-right: 15px">{{ item.name }}</span>
            <span v-show="item.statusData == 'waitting'" class="runClass">
              <i class="fa fa-spinner fa_color"></i>
            </span>
            <span @click="closeFile(item)" v-show="item.statusData == 'fal'">
              <i class="fa fa-close fa_color"></i>
            </span>
            <span v-show="item.statusData == 'exc'">
              <i class="fa fa-exclamation fa_color"></i>
            </span>
            <span v-show="item.statusData == 'tru'">
              <i class="fa fa-check fa_color"></i>
            </span>
          </div>
        </div>
        <template #footer class="footerBtns">
          <CButton
            v-if="fileList.length != 0 && getFalIndex !== -1"
            @click="closeSuanfa"
            color="info"
            id="ok"
            class="system-btn-style"
            :disabled="buttonDis"
          >上传</CButton>
          <CButton
            v-else
            @click="closeSuanfa"
            color="info"
            id="ok"
            class="system-btn-style"
            :disabled="buttonDis"
          >关闭</CButton>
        </template>
      </Modal>
      <div>
        <TaskDetailsChild v-show="showDetails"></TaskDetailsChild>
      </div>
    </div>

    <Modal
      v-model="warningModal"
      draggable
      scrollable
      title="算法查看"
      :width="800"
      footer-hide
      class="algoLook"
    >
      <p slot="header" class="modalHeader">算法查看</p>
      <Row class="modalBody-algo">
        <Tabs type="card" :animated="true">
          <TabPane label="基本信息">
            <CForm class="writeMessage">
              <!--              <CRow>
                <CCol sm="6">
                  <div style="display: flex; height: 70px">
                    <p style="margin-right: 45px; font-weight: bold">
                      算法图标
                    </p>
                    <img
                      :src="base64str"
                      alt
                      style="width: 30px; height: 30px"
                    />
                    <div
                      @click="onPickFile"
                      style="
                        font-weight: bold;
                        padding: 5px;
                        margin-right: 5px;
                        width: 50px;
                        border: 0px;
                        background-color: #fff;
                      "
                    >
                      <img src="@/assets/icons/add.png" alt />
                    </div>
                    <input
                      type="file"
                      ref="fileInput"
                      accept="image/*"
                      @change="getFile"
                      style="display: none"
                    />
                    <div v-show="algIcone">
                      <img :src="imageUrl" />
                    </div>
                  </div>
                </CCol>
              </CRow>-->
              <CRow>
                <CCol sm="6">
                  <CInput label="算法名称" horizontal readonly v-model="algorithmList.name" />
                </CCol>
                <CCol sm="6">
                  <CInput label="算法简称" readonly horizontal v-model="algorithmList.abbrev" />
                </CCol>
              </CRow>
              <CRow>
                <CCol sm="6" style="display: flex">
                  <!-- <CInput label="算法分组" readonly horizontal v-model="algorithmList.classifyId" /> -->
                  <span class="algTitle">算法分组</span>
                  <Cascader
                    :data="dataCascader"
                    change-on-select
                    filterable
                    disabled
                    v-model="test"
                    class="algGroup"
                  ></Cascader>
                </CCol>
                <CCol sm="6">
                  <CInput label="算法描述" horizontal readonly v-model="algorithmList.desc" />
                </CCol>
              </CRow>
              <CRow>
                <CCol sm="6">
                  <CInput label="提供单位" readonly horizontal v-model="algorithmList.owner" />
                </CCol>
                <CCol sm="6">
                  <CInput label="算法类型" readonly horizontal v-model="algorithmList.type" />
                </CCol>
              </CRow>
              <CRow>
                <CCol sm="6">
                  <CInput label="算法标识" readonly horizontal v-model="algorithmList.alg_id" />
                </CCol>
                <CCol sm="6">
                  <CInput label="版本" readonly horizontal v-model="algorithmList.version" />
                </CCol>
              </CRow>
            </CForm>
          </TabPane>
          <TabPane label="参数信息">
            <div class="bodyStyle" style="padding-right: 10px; overflow-y: auto; height: 360px">
              <div class="messageTable">
                <div class="titleTable">
                  <span>输入参数</span>
                </div>

                <div class="inputTable">
                  <!-- 属性pagination 表示可以分页查看 -->
                  <CDataTable :items="itemsParameterPush" :fields="inputdata" hover>
                    <template v-slot:label="{ item }">
                      <!--   <td
                                  @dblclick="editTable($event, item, 'input')"
                                  :id="`${item.label}-input-td`"
                          >
                            {{ item.label }}
                      </td>-->
                      <td>{{ item.label }}</td>
                    </template>

                    <template v-slot:type="{ item }">
                      <td>{{ item.type }}</td>
                    </template>
                    <template v-slot:desc="{ item }">
                      <td>{{ item.desc }}</td>
                      <!--                      <td v-else>
                        <CInput
                          size="sm"
                          placeholder="请输入内容"
                          v-model="changeInputItem"
                          @blur="inputBlur(item, 'desc')"
                        />
                      </td>-->
                    </template>

                    <!--                    <template v-slot:isShow="{ item }">
                      <td>
                        <CInputCheckbox :checked.sync="item.isShow">
                        </CInputCheckbox>
                      </td>
                    </template>-->
                  </CDataTable>
                </div>

                <div>
                  <span class="titleTable">输出参数</span>
                  <CDataTable
                    :items="itemsParameterOut"
                    :fields="outputdata"
                    hover
                    class="outputTable"
                  >
                    <!-- pagination 表示可以分页查看 -->
                    <!--   <template #label="{ item }">
                      <td
                        @dblclick="editTable($event, item, 'output')"
                        :id="`${item.label}-output-td`"
                      >
                        {{ item.label }}
                      </td>
                    </template>-->

                    <template v-slot:label="{ item }">
                      <!--   <td
                                 @dblclick="editTable($event, item, 'input')"
                                 :id="`${item.label}-input-td`"
                         >
                           {{ item.label }}
                      </td>-->
                      <td>{{ item.label }}</td>
                    </template>

                    <template v-slot:type="{ item }">
                      <td>{{ item.type }}</td>
                    </template>

                    <template v-slot:desc="{ item }">
                      <td>{{ item.desc }}</td>
                    </template>
                  </CDataTable>
                </div>
              </div>
            </div>
          </TabPane>
        </Tabs>
      </Row>
      <template #footer>
        <CButton @click="submit" color="info" class="system-btn-style">保存</CButton>
      </template>
    </Modal>
    <Modal v-model="addShow" draggable scrollable :styles="modalStyle" title="新建算法分类">
      <p slot="header" class="modalHeader">新建算法分类</p>
      <CRow>
        <CCol md="9">
          <CForm>
            <CInput label="分类名称" placeholder="请输入分类名称" horizontal v-model="addData.name" />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addCancel" color="info" class="cancel-btn">取消</CButton>
        <CButton @click="addOk" color="info system-btn-style">确定</CButton>
      </template>
    </Modal>
    <Modal v-model="updateShow" draggable scrollable :styles="modalStyle" title="更新算法分类">
      <p slot="header" class="modalHeader">更新算法分类</p>
      <CRow>
        <CCol md="9">
          <CForm>
            <CInput label="分类名称" placeholder="请输入分类名称" horizontal v-model="upData.name" />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="updateCancel" color="info" class="cancel-btn">取消</CButton>
        <CButton @click="updateOk" color="info system-btn-style">确定</CButton>
      </template>
    </Modal>
    <Modal v-model="delShow" draggable scrollable :styles="modalStyle" title="删除算法分类">
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span>删除算法分类</span>
      </p>
      <div class="modalBody">
        <p>删除算法分类时与生产线分类相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delCancel" color="info" class="cancel-btn">取消</CButton>
        <CButton @click="delOk" color="info system-btn-style">确定</CButton>
      </template>
    </Modal>
    <Modal v-model="removeModal" draggable scrollable title="算法迁移">
      <p slot="header" class="modalHeader">算法迁移</p>
      <CCardBody style="overflow-y: scroll; height: 300px">
        <Tree :data="treeData3" ref="resTree" @on-select-change="selectTree2"></Tree>
      </CCardBody>

      <template #footer class="footerBtns">
        <CButton @click="moveCancel" color="info" class="cancel-btn">取消</CButton>
        <CButton @click="moveOk" color="info" class="system-btn-style">确定</CButton>
      </template>
    </Modal>
    <Modal v-model="delModelShow" draggable scrollable :styles="modalStyle" title="删除算法">
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span>删除算法</span>
      </p>
      <div class="modalBody">
        <p>删除算法时与生产线分类相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delModelShowCancle" color="info" class="cancel-btn">取消</CButton>
        <CButton @click="delModelOk" color="info" class="system-btn-style">确定</CButton>
      </template>
    </Modal>

    <!--排序弹框-->
    <sort-delog
      ref="sortDelog"
      :dragSortProp="dragSortDdata"
      :SortDdata.sync="sortData"
      :confirmData="confirmData"
    ></sort-delog>

    <Modal
      v-model="addAlgoPluginModal"
      draggable
      scrollable
      title="添加算法"
      :width="1200"
      :styles="{ top: '50px' }"
    >
      <p slot="header" class="modalHeader">添加算法</p>
      <p slot="close" @click="addAlgoPluginModal = false" style="font-size: 1.2rem">x</p>

      <!-- :currentSelectGroup="algSelect" -->
      <addAlgoPluginModal ref="refAddAlgoPluginModal" :groupData="dataCascaderPlugin"></addAlgoPluginModal>
      <template #footer>
        <CButton @click="addAlgoPluginSaveBtn" color="info" class="system-btn-style">保存</CButton>
        <CButton @click="addAlgoPluginSubmitBtn" color="info" class="system-btn-style">提交</CButton>
      </template>
    </Modal>

    <Modal
      v-model="editAlgoPluginModal"
      draggable
      scrollable
      title="修改算法"
      :width="1200"
      :styles="{ top: '50px' }"
    >
      <p slot="header" class="modalHeader">修改算法</p>
      <p slot="close" @click="editAlgoPluginModal = false" style="font-size: 1.2rem">x</p>

      <addAlgoPluginModal ref="refEditAlgoPluginModal" :groupData="dataCascaderPlugin"></addAlgoPluginModal>
      <template #footer>
        <CButton @click="updateAlgoPluginBtn" color="info" class="system-btn-style">更新</CButton>
        <CButton @click="rebuildAlgoPluginBtn" color="info" class="system-btn-style">重编</CButton>
      </template>
    </Modal>
  </div>
</template>
<script>
import TableList from "@/template/table/TableList";
// import modelCate from "../../views/components/model";
import axios from "axios";
import TaskDetailsChild from "@/views/taskMonitor/taskDetailsChild";
import bigfileupload from "@/containers/dataManage/bigfileupload";
import sortDelog from "@/template/sortDelog/sortDelog";

import addAlgoPluginModal from "./common/addAlgoPluginModal.vue";

const items = [];
const itemsParameterPush = [];
const itemsParameterOut = [];
const taskitems = [
  {
    参数名称: "文件全路径",
    参数默认值: ""
  }
];
const detail_items = [
  {
    name: "",
    abbrev: "",
    version: "",
    command: "",
    os: "",
    owner: ""
  }
];
const fields = [
  {
    label: "序号",
    key: "number",
    // _style: "width:60px;align:center;background:rgba(241,244,249,1);height:47px;padding:12px;",
    _style:
      "width:77px;align:center;background:rgba(241,244,249,1);height:47px;padding:12px;padding-left:24px;",
    sorter: false
  },
  {
    label: "名称",
    key: "name",
    _style:
      "width:auto;text-align: center;background:rgba(241,244,249,1);height:47px;",
    align: "center",
    sorter: false
  },
  {
    label: "算法描述",
    key: "desc",
    _style:
      "width:auto;text-overflow: ellipsis;text-align: center;background:rgba(241,244,249,1);height:47px;",
    align: "center",
    sorter: false
  },
  {
    label: "算法分类",
    key: "classifyName",
    _style:
      "width:150px;text-overflow: ellipsis;text-align: center;background:rgba(241,244,249,1);height:47px;",
    align: "center",
    sorter: false
  },
  {
    label: "算法类型",
    key: "show_detailsImg",
    // _style:"width:90px;text-overflow: ellipsis;text-align: center;background:rgba(241,244,249,1);height:47px;",
    _style:
      "width:105px;text-overflow: ellipsis;text-align: center;background:rgba(241,244,249,1);height:47px;padding-left:24px;",
    align: "center",
    sorter: false
  },
  {
    label: "版本",
    key: "version",
    _style:
      "width:120px;text-overflow: ellipsis;text-align: center;background:rgba(241,244,249,1);height:47px;",
    align: "center",
    sorter: false
  },
  {
    label: "上传时间",
    key: "create_time",
    sortable: true,
    _style:
      "width:170px;text-align: center;background:rgba(241,244,249,1);height:47px;",
    align: "center",
    sorter: false
  },
  {
    label: "操作",
    key: "show_details",
    _style:
      "width:210px;text-overflow: ellipsis;text-align: center;background:rgba(241,244,249,1);height:47px;",
    align: "center",
    sorter: false
  }
];
const field = [
  // { label: "序号", key: "num", _style: "width:3%;align:center"
  //  },
  { label: "名称", key: "name", align: "center" },
  {
    label: "上传时间",
    key: "createTime",
    align: "center"
  },
  { label: "算法描述", key: "version", align: "center" },
  {
    label: "操作",
    key: "show_details",
    label: "",
    align: "center"
  }
];
const inputdata = [
  {
    label: "参数名",
    key: "label",
    _style: "width:30%;align:center;background:rgba(241,244,249,1);"
  },
  {
    label: "类型",
    key: "type",
    _style: "width:14%;background:rgba(241,244,249,1);",
    align: "center;"
  },
  {
    label: "参数描述",
    key: "desc",
    _style: "width:30%;text-overflow: ellipsis;background:rgba(241,244,249,1);",
    align: "center"
  }
];
const outputdata = [
  {
    label: "参数名",
    key: "label",
    _style: "width:30%;align:center;background:rgba(241,244,249,1);"
  },
  {
    label: "类型",
    key: "type",
    _style: "width:14%;background:rgba(241,244,249,1);",
    align: "center"
  },
  {
    label: "参数描述",
    key: "desc",
    _style: "width:30%;text-overflow: ellipsis;background:rgba(241,244,249,1);",
    align: "center"
  }
];

export default {
  name: "algoManage",

  components: {
    // modelCate,
    TaskDetailsChild,
    bigfileupload,
    TableList,
    sortDelog,
    addAlgoPluginModal
  },

  data() {
    return {
      currentRowItem: {},
      addAlgoPluginModal: false,
      editAlgoPluginModal: false,
      currentSelectGroupName: [],
      //下面是以前的
      queryTypeOptions: [
        { label: "名称", value: "name" },
        { label: "分类", value: "imagePackage" },
        { label: "类型", value: "type" },
        { label: "版本", value: "version" }
        /*  { label: "上传时间", value: "createTime" },*/
      ],
      queryType: "name",

      changeInputItem: "",
      openOneInput: true,
      itemMessage: "",
      selectOptions: [
        { value: "file", label: "file" },
        { value: "int", label: "int" },
        { value: "string", label: "string" }
      ],

      // 节点标识
      modalStyle: { top: "340px" },
      myFlag: -1,
      permissionList: "",
      listName: "全部算法",
      test: [], //[],
      algSelect: [],
      // algGroupId:[""],
      algIcone: true,
      showimgsearchicon: true,
      showimgofficon: false,
      imageUrl: "", //img绑定的src地址
      postUrl: "", //需要上传到的地址
      imgAlgId: "",
      imgVersion: "",
      base64str: "",
      dragstartNode: "",
      dragstartData: "",
      classifyId: [],
      delModelShow: false,
      dataCascader: [], //级联选择
      dataCascaderPlugin: [],
      cascaderValue: [],
      itemsParameterPush: [],
      itemsParameterOut: [],
      inputdata,
      outputdata,
      reFresh: false,
      menuTree: [],
      showDetails: false,
      children: false,
      delShow: false,
      updateShow: false,
      addShow: false,
      treeData: [],
      treeData3: [],
      options: [],
      modelCateId: "",
      moveId: 0,
      label: "",
      pid: "",
      clickId: "",
      parentId: "",
      showDataTbale: false, //参数数据表
      select: "processmodel",
      addData: {
        //添加
        name: "",
        treeKey: "",
        parentId: ""
      },
      upData: {
        //更新
        name: "",
        treeKey: "",
        parentId: ""
      },
      searchName: "", //算法搜索框
      templist: {},
      algorithmList: {},
      namevalue: "测试",
      warningModal: false,
      removeModal: false,
      items: items.map((item, id) => {
        return { ...item, id };
      }),
      fields,
      id: "",
      counter: 0, //进度条
      details: [],
      name: [],
      tableData2: [],
      tableDatas: {},
      loading: false,
      collapseDuration: 0,
      showAdd: false,
      addingAlgorithm: false,
      uploadModelForm: {
        upLoadModelCateid: ""
      },
      uploading: false,
      uploadingSuccess: false,
      // createProcessTasks: false,
      detail_items: detail_items.map(item => {
        return { ...item };
      }),
      arithmeticId: "",
      fenleiName: [],
      currentPage: 1,
      pages: 0,
      total: 0,
      allNum: 0,
      pageSize: 25,
      getColumns: [
        {
          title: "名称",
          key: "name"
        },
        {
          title: "算法状态",
          key: "state",
          width: 80,
          className: "centerText"
        },
        {
          title: "算法描述",
          key: "desc"
        },
        {
          title: "算法分类",
          key: "classifyName",
          slot: "classifyName",
          width: 180,
          className: "centerText"
        },
        {
          title: "算法类型",
          key: "show_detailsImg",
          slot: "show_detailsImg",
          width: 100,
          className: "centerText"
        },
        {
          title: "版本",
          key: "version",
          width: 80,
          className: "centerText"
        },
        {
          title: "上传时间",
          key: "create_time",
          width: 170,
          className: "centerText"
        },
        {
          title: "操作",
          key: "show_details",
          slot: "show_details",
          className: "centerText",
          width: 200
        }
      ],
      getAxios: {
        url: this.$api.modelApi.imageMetaDataAllListByCondition, //请求路径
        method: "post", //请求方式
        dataList: {
          classifyId: 1
        } //请求参数
      },
      fileList: [],
      buttonDis: false,

      /*排序*/
      dragSortDdata: [], //需要排序的数据
      disableButton: true,
      currentClickItemId: "", //当前点击对象
      sortData: [], //已经拍好顺序的
      allDataList: {}, //所有的表格数据
      confirmData: {
        forName: "title",
        type: "tree",
        url: this.$api.modelApi.groupSort //树排序
      }
    };
  },
  computed: {
    getFalIndex() {
      let index = this.fileList.findIndex(item => item.statusData == "fal");
      return index;
    }
  },
  created() {
    this.algIcone = false;
  },
  mounted() {
    let _this = this;
    this.getModelCategoryTree(_this.select); //三级菜单
    //  this.getMetaDataList(_this.modelCateId);
    this.Traversal();
  },

  methods: {
    // 新增算法界面 保存按钮
    addAlgoPluginSaveBtn() {
      let _this = this;
      let param = this.$refs.refAddAlgoPluginModal.getAlgoPluginParam("edit");
      if (JSON.stringify(param) === "{}") {
        return;
      }
      this.addAlgoPluginSave(param);
    },
    // 新增算法界面 提交按钮
    addAlgoPluginSubmitBtn() {
      let _this = this;
      let param = this.$refs.refAddAlgoPluginModal.getAlgoPluginParam(
        "rebuild"
      );
      if (JSON.stringify(param) === "{}") return;
      param.id = _this.currentRowItem ? _this.currentRowItem.id : "";
      this.addAlgoPluginSubmit(param);
    },
    //编辑算法界面的更新按钮
    updateAlgoPluginBtn() {
      let _this = this;
      let param = this.$refs.refEditAlgoPluginModal.getAlgoPluginParam("edit");
      if (JSON.stringify(param) === "{}") return;
      param.id = _this.currentRowItem ? _this.currentRowItem.id : "";
      this.addAlgoPluginSave(param);
    },
    //编辑算法界面的rebuild按钮
    rebuildAlgoPluginBtn() {
      let _this = this;
      let param = this.$refs.refEditAlgoPluginModal.getAlgoPluginParam(
        "rebuild"
      );
      if (JSON.stringify(param) === "{}") return;
      param.id = _this.currentRowItem ? _this.currentRowItem.id : "";
      this.addAlgoPluginSubmit(param);
    },

    // build 算法
    addAlgoPluginSubmit(param) {
      let path = this.$api.modelApi.addAlgPlugin;
      this.http.post(path, param).then(res => {
        if (res.data.success) {
          this.addAlgoPluginModal = false;
          this.$Message.success("创建成功");
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    // 更新和保存 算法
    addAlgoPluginSave(param) {
      let path = this.$api.modelApi.addAlgPlugin;
      this.http.post(path, param).then(res => {
        if (res.data.success) {
          this.addAlgoPluginModal = false;
          this.$Message.success("操作成功");
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    // 编辑
    updateAlgoBtn(row, index) {
      if (row.build_from != "front") {
        this.$Message.warning("该算法不是前端创建的不能编辑！");
        return;
      }
      this.editAlgoPluginModal = true;
      this.currentRowItem = row;
      // 编辑更新将当前的row对象回显在编辑界面上
      debugger;
      // this.$bus.$emit("displayAlgoPluginParam", row.edit);
      this.$refs.refEditAlgoPluginModal.initModalParam(row.edit);
    },
    downloadAlgoBtn(row, index) {
      let zipPath = row.zipPath;
      let path = this.$api.modelApi.downloadZip;
      window.location.href = path + "?path=" + zipPath;
    },
    copyAlgoBtn(row, index) {
      this.currentRowItem = row;
      // 复制参数并打开注册插件modal
      this.addAlgoPluginModal = true;
      // 版本一样会覆盖之前 ，所以加上区别后缀
      let version = row.edit.algBaseInfo.algVersion;
      row.edit.algBaseInfo.algVersion = version + "1";
      // this.$bus.$emit("displayAlgoPluginParam", row.edit);
      this.$refs.refAddAlgoPluginModal.initModalParam(row.edit);
    },

    algoDropdownMenuChange(val) {
      if (val === "add") {
        this.addAlgoPluginModal = true;
      } else if (val === "import") {
        this.reFresh = true;
      }
    },

    /////////////////////////////////////////////////
    // 下面是以前的
    searchChange() {
      this.searchName = "";
    },
    //打开排序弹框
    dragSortClick(data) {
      let that = this;
      this.$refs.sortDelog.openOrClose();
      if (data === "table") {
        that.confirmData = {
          forName: "name",
          type: "table",
          url: this.$api.modelApi.updateBatchImageMetaData,
          isModel: "isModel" //判断是否是model模块
        };
        //获取表格数据
        let path = this.$api.modelApi.imageMetaDataAllListByCondition;
        let param = {
          pageNum: "",
          pageSize: "",
          classifyId: that.modelCateId
        };
        let getAxiosData = {
          method: "post",
          url: path
        };
        that.$refs.table.exportTableData(param, getAxiosData);
      }
      if (data === "tree") {
        that.confirmData = {
          forName: "title",
          type: "tree",
          isModel: "isModel", //判断是否是model模块
          url: this.$api.modelApi.queryProcessInfoTreeByTreeKey
        };
      }
    },
    selectTree(data, list) {
      // 解决切换选择node时currentPage关联问题
      this.currentPage = 1;
      let newTreeList = [];
      let self = this;

      self.searchName = "";
      self.modelCateId = this.$refs.tree.getSelectedNodes()[0].id;
      self.currentClickItemId = list.id;
      if (list.children && list.children.length) {
        self.dragSortDdata = list.children;
        self.disableButton = true;
      } else {
        self.dragSortDdata = [];
        self.disableButton = false;
      }

      self.listName = this.$refs.tree.getSelectedNodes()[0].title;
      self.dragSortDdata =
        list.children !== null && list.children.length ? list.children : [];
      let treeAllData = this.$refs.tree.data;
      /**
       * 获取父节点标识
       */
      // 获取点击的节点名称
      let selectTrueDelete = this.$refs.tree.getSelectedNodes()[0].title;
      /**
       * 设置当前点击节点的唯一标识
       */
      for (let i = 0; i < treeAllData.length; i++) {
        if (treeAllData[i].children != null) {
          let childrendata = treeAllData[i].children;
          // 判断子节点组是否包含选择的节点，包含返回所在父节点的i
          for (let j = 0; j < childrendata.length; j++) {
            if (childrendata[j].title == selectTrueDelete) {
              self.myFlag = i;
            }
          }
        }
      }

      let cateId = self.modelCateId;
      //循环执行所有选中的节点链，放到arr1数组里
      let arr1 = [];
      let aData = this.getParent(treeAllData, [], cateId); //方法入口在这里
      for (let y = 0; y < aData.length; y++)
        //拆分成单个json数组放到arr1里
        arr1.push(aData[y]);
      for (let i = 0; i < arr1.length; i++) newTreeList.push(arr1[i].id);
      this.algSelect = newTreeList;
      this.test = newTreeList;
      self.moveId = this.$refs.tree.getSelectedNodes()[0].id;
      self.name = this.$refs.tree.getSelectedNodes()[0].title;
      self.pid = this.$refs.tree.getSelectedNodes()[0].pid;
      this.getMetaDataList(self.modelCateId);
      if (this.$refs.tree.getSelectedNodes()[0].children == null) {
        this.children = false;
      } else {
        this.children = true;
      }
    },
    clearFilesList() {
      this.fileList = [];
    },

    //上传前

    upDataFile(param) {
      this.$set(param, "statusData", "fal");
      this.fileList.push(param);
      this.uploadingSuccess = false;
      return false;
    },
    closeFile(data) {
      let index = this.fileList.findIndex(item => {
        return item.name === data.name;
      });
      this.fileList.splice(index, 1);
    },
    //提交任务关闭弹框
    closeSuanfa() {
      let that = this;
      //查找正在上传的
      let waittingIndex = this.fileList.findIndex(item => {
        return item.statusData === "waitting";
      });
      //失败状态 未上传状态
      let falIndex = this.fileList.findIndex(item => {
        return item.statusData === "fal";
      });
      if (this.fileList.length == 0) {
        //清空上传列表并关闭弹框
        this.$refs.uploadFilePl.clearFiles();
        this.addingAlgorithm = false;
      } else {
        if (falIndex !== -1) {
          //未上传转态
          that.buttonDis = true;
          let path = this.$api.modelApi.imageUploadBatch;
          let fd = new FormData(); //内置方法new FormData()  新建一个表格
          let fileListData = [];
          let fileListDataStyle = [];

          let totalSize = that.getUploadSize();
          if (totalSize > maxUploadFileTotalSize) {
            that.buttonDis = false;
            that.$Message.warning(
              "上传文件不能超出" +
                parseInt(maxUploadFileTotalSize / 1000000) +
                "M"
            );
            return;
          }

          this.fileList.forEach(function(file) {
            that.$set(file, "statusData", "waitting");
            fileListData.push(file);
            fd.append("file", file);
          });
          this.fileList = fileListData;
          axios
            .post(path, fd, { "Content-Type": "multipart/form-data" })
            .then(res => {
              if (res.data.success) {
                that.getUploadMessage(res.data);
              } else {
                that.fileList.forEach(function(file) {
                  that.$set(file, "statusData", "exc");
                  fileListDataStyle.push(file);
                });
                that.buttonDis = false;
                that.fileList = fileListDataStyle;
                that.$Message.warning("任务提交失败,请稍后重试");
              }
            })
            .catch(error => {
              console.log(error);
            });
        }
        // 上传已经完成
        if (waittingIndex === -1 && falIndex === -1) {
          this.fileList = [];
          this.$refs.uploadFilePl.clearFiles();
          this.addingAlgorithm = false;
        }
      }
    },
    getUploadMessage(param) {
      let that = this;
      let path = that.$api.modelApi.imageTaskListByID + param.data;
      let timeOut = setInterval(() => {
        that.http
          .get(path)
          .then(res => {
            if (res.data.success) {
              let finishAlgNameArr = []; //完成上传的文件名称拼接
              let unFinishAlgNameArr = []; //未完成上传的文件名称拼接
              let fileListData = []; //用于对显示列表进行二次赋值
              let batchAlgInfoArr = Object.keys(
                JSON.parse(res.data.data.batchAlgInfo)
              );
              if (res.data.data.finishAlg) {
                let finishAlgArr = Object.keys(
                  JSON.parse(res.data.data.finishAlg)
                );
                let value = Object.values(JSON.parse(res.data.data.finishAlg));
                finishAlgArr.forEach((item, index) => {
                  finishAlgNameArr.push(
                    finishAlgArr[index] + "_" + value[index] + ".zip"
                  );
                });
              }
              if (res.data.data.unFinishAlg) {
                let unFinishAlgArr = Object.keys(
                  JSON.parse(res.data.data.unFinishAlg)
                );
                let value = Object.values(
                  JSON.parse(res.data.data.unFinishAlg)
                );
                unFinishAlgArr.forEach((item, index) => {
                  unFinishAlgNameArr.push(
                    unFinishAlgArr[index] + "_" + value[index] + ".zip"
                  );
                });
              }
              //循环改变文件状态
              that.fileList.forEach(function(file) {
                let finishIndex = finishAlgNameArr.findIndex(item => {
                  return item === file.name;
                });
                let unFinishIndex = unFinishAlgNameArr.findIndex(item => {
                  return item === file.name;
                });
                if (
                  finishIndex === -1 &&
                  unFinishIndex === -1 &&
                  unFinishAlgNameArr.length !== 0
                ) {
                  that.$set(file, "statusData", "exc");
                } else if (finishIndex !== -1) {
                  that.$set(file, "statusData", "tru");
                } else if (unFinishIndex !== -1) {
                  that.$set(file, "statusData", "exc");
                }
                fileListData.push(file);
              });
              that.fileList = fileListData;
              //需要的数据已经全部拿到
              if (
                finishAlgNameArr.length + unFinishAlgNameArr.length >=
                batchAlgInfoArr.length
              ) {
                that.buttonDis = false;
                clearInterval(timeOut);
              }
            } else {
              clearInterval(timeOut);
              that.$Message.warning("查询详情失败");
            }
          })
          .catch(() => {
            clearInterval(timeOut);
            that.$Message.warning("查询详情失败，请联系管理员");
          });
      }, 1500);
    },

    getUploadSize() {
      let totalSize = 0;
      this.fileList.forEach(item => {
        totalSize = item.size + totalSize;
      });
      return totalSize;
    },

    //以上测试

    /* editTable(event, data, type) {
        let id = data.label + "-" + type + "-td";
        event.target.innerHTML = "";
        let cellInput = document.createElement("input");
        cellInput.value = data.label;
        cellInput.className = "algo-label-td";
        cellInput.setAttribute("type", "text");
        // cellInput.style.width = "80%";
        cellInput.style.cssText = "border: 1px solid #d8dbe0;";
        $("#" + id).append(cellInput);
        cellInput.focus();
        cellInput.onblur = function () {
          $("#" + id).remove(cellInput);
          event.target.innerHTML = cellInput.value;
        };
      },*/

    changeInout(item, label) {
      if (this.openOneInput) {
        this.itemMessage = item[label];
        item[label] = "";
        this.openOneInput = false;
      } else {
        this.$Message.warning("请输入内容");
      }
    },
    inputBlur(item, label) {
      debugger;
      if (this.changeInputItem) {
        item[label] = this.changeInputItem;
      } else {
        item[label] = this.itemMessage;
        this.itemMessage = "";
      }
      this.changeInputItem = "";
      this.openOneInput = true;
    },

    optionsSelect(data) {
      console.log(data);
    },

    getVendorId(event) {
      let tempdata = event.target.value; //获取option对应的value值
      this.pageSize = parseInt(tempdata);
      // let pageSizeNew = this.pageSize
      this.getMetaDataList();
    },
    //第二步:再来写个方法, button代替input选择图片
    onPickFile() {
      this.$refs.fileInput.click();
    },
    //第三步: 文件选择后, 后在页面上显示出来    转base64位的操作
    getFile(event) {
      const files = event.target.files;
      let filename = files[0].name; //只有一个文件
      if (filename.lastIndexOf(".") <= 0) {
        return this.$Message.warning("请选择一张图片!"); //判断图片是否有效
      }
      const fileReader = new FileReader(); //内置方法new FileReader()   读取文件
      fileReader.addEventListener("load", () => {
        this.imageUrl = fileReader.result;
        this.algIcone = true;
      });
      fileReader.readAsDataURL(files[0]);
      this.image = files[0];
      //到这里后, 选择图片就可以显示出来了
    },
    //第四步: 上传文件了

    onUpload(event) {
      event.preventDefault();
      let path = this.$api.modelApi.updataAlgIcon;
      let fd = new FormData(); //内置方法new FormData()  新建一个表格

      // 不选文件的时候选择默认的
      if (!(this.image && this.imgAlgId && this.imgVersion)) {
        return;
      }

      fd.append("file", this.image); //把image添加进去
      fd.append("algId", this.imgAlgId); //把image添加进去
      fd.append("version", this.imgVersion); //把image添加进去

      axios
        .post(path, fd)
        .then(res => {
          //第一个参:this.postUrl就是上面保存好的要上传的地址
          console.log(res); //(      第三次有效打印    )
          if (res.data.success == true) {
            // let data = res.data.data;
            // let imageUrl = data.url; //上传成功 , 后台返回了一个图片地址
            // this.imageUrl = imageUrl;
            this.algIcone = true;
            this.$Message.success(res.data.message);
            this.getAlgIcon(row);
          } else {
            this.$Message.error(res.data.message);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    enterfaction() {
      this.currentPage = 1;
      // 搜索算法列表显示搜索的关键字
      this.listName = this.searchName;
      this.search();
    },
    clearmess() {
      this.searchName = "";
      this.getMetaDataList();
    },
    // 验证输入框内容
    check_count(event) {
      // var value = event.target.value;
      // // let res = [一 - 龥];
      // if ([u4e00 - u9fa5].match(value)) {
      //   this.$Message.error("只能输入正整数");
      //   event.target.value = "";
      // }
    },
    //算法模糊查询
    search() {
      let self = this;
      let searchName = self.searchName.trim();
      let path = this.$api.modelApi.imageMetaDataAllListByCondition;
      let params = {
        pageNum: self.currentPage,
        pageSize: self.pageSize
      };
      console.log(params);
      //查询类型
      //算法名称: name  分类：imagePackage  版本：version 算法类型：type  上传时间：createtime
      if (this.queryType === "type" && searchName.toLowerCase() === "c++") {
        searchName = "command";
      }
      this.$set(params, this.queryType, searchName);

      let getAxiosData = {
        method: "post",
        url: path
      };
      this.$refs.table.getRefreshTable(params, getAxiosData);
    },
    renderContent(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
            cursor: "pointer"
          },

          on: {
            click: () => {
              // this.clickTree1(data);
            }
          }
        },

        [
          h(
            "Tooltip",
            {
              props: {
                placement: "right-end",
                transfer: true
              }
            },
            [
              data.title, //控制树形显示的内容
              h(
                "span",
                {
                  slot: "content",
                  style: {
                    whiteSpace: "normal"
                  }
                },
                data.title //控制Tooltip显示的内容
              )
            ]
          ),

          h("span", {
            style: {
              display: "inline-block",
              marginRight: "32px"
            }
          })
        ]
      );
    },
    append(data) {
      const children = data.children || [];
      children.push({
        title: "appended node",
        expand: true
      });
      this.$set(data, "children", children);
    },
    createProcessTasks() {
      this.warningModal = false;
    },

    // 算法分类查询
    // 1.请求
    Traversal() {
      // this.test;
      let treeKey = "processmodel";
      let numsdata = [];
      let numsdataTemp = [];
      let path = this.$api.modelApi.queryProcessInfoTreeByTree + treeKey;
      let param = {
        // _loadingContainer: document.querySelector(".c-body"),
      };
      this.http.get(path, param).then(res => {
        let data = res.data.data;
        for (let i in data) {
          let tempItem = data[i];
          let tempobject1 = {};
          tempobject1.value = data[i].id;
          tempobject1.label = data[i].title;
          tempobject1.children = [];
          numsdata.push(tempobject1);

          let tempObj = {};
          tempObj.value = data[i].title;
          tempObj.label = data[i].title;
          tempObj.children = [];
          numsdataTemp.push(tempObj);

          if (data[i].children != null) {
            this.numTraversal(data[i].children, tempobject1.children);
            this.numTraversal2(data[i].children, tempObj.children);
          }
        }

        this.dataCascader = numsdata;

        this.dataCascaderPlugin = numsdataTemp;
      });
    },
    numTraversal(data, numsdata) {
      for (let i = 0; i < data.length; i++) {
        let tempobject = {};
        tempobject.value = data[i].id;
        tempobject.label = data[i].title;
        tempobject.children = [];
        numsdata.push(tempobject);
        if (data[i].children != null) {
          this.numTraversal(data[i].children, tempobject.children);
        }
      }
      return numsdata;
    },
    numTraversal2(data, numsdata) {
      for (let i = 0; i < data.length; i++) {
        let tempobject = {};
        tempobject.value = data[i].title;
        tempobject.label = data[i].title;
        tempobject.children = [];
        numsdata.push(tempobject);
        if (data[i].children != null) {
          this.numTraversal(data[i].children, tempobject.children);
        }
      }
      return numsdata;
    },
    // 2.遍历循环
    numTraversal0(data, numsdata) {
      for (let i = 0; i < data.length; i++) {
        let tempobject = {};
        let tempobject1 = {};
        tempobject1.value = data[i].id;
        tempobject1.label = data[i].title;
        tempobject.children = data[i].children;
        numsdata[numsdata.length - 1].children.push(tempobject1);
        if (data[i].children != null) {
          this.numTraversal(data[i].children, numsdata);
        }
      }
    },
    //算法上传
    upLoad(file) {
      this.current = 1;
      if (this.algSelect.length > 1) {
        this.classifyId = this.algSelect[this.algSelect.length - 1];
      } else {
        this.classifyId = this.algSelect;
      }
      let path = this.$api.modelApi.getDataList + this.classifyId;
      var formData = new window.FormData();
      formData.append("file", file);

      let timer;
      //清空多选的上传列表，和文件列表
      this.$refs.uploadFilePl.clearFiles();
      this.fileList = [];

      this.uploading = true;
      this.uploadingSuccess = false;
      axios
        .post(path, formData, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(res => {
          if (res.data.success === true) {
            this.counter = 100;
            this.uploadingSuccess = true;
            clearInterval(timer);
            // this.uploadModelForm.upLoadModelCateid = [];
            this.showDataTbale = true;
            this.id = res.data.data;
            this.imageMetaData(this.id); //算法参数查询接口
          } else {
            this.$Message.error(res.data.message);
            this.counter = 0;
            this.uploadingSuccess = false;
            clearInterval(timer);
          }
          this.uploading = false;
        })
        .catch(error => {
          this.uploading = false;
          this.uploadingSuccess = false;
          this.$Message.error(error);
        });
      timer = setInterval(() => {
        if (this.counter < 95) {
          this.counter += 5;
        } else {
          clearInterval(timer);
        }
      }, 1000);
      return false; // 阻止默认上传动作
    },

    // 算法参数查询
    imageMetaData(id) {
      this.showDataTbale = true;
      this.current = 3;
      let url = this.$api.modelApi.getImageMetaDataList + id;
      this.http.get(url).then(res => {
        if (res.data.success == true) {
          let data = res.data.data;
          let temp = {};
          temp.algId = data.algId;
          temp.version = data.version;
          temp.type = data.type;
          temp.name = data.name;
          temp.abbrev = data.abbrev;
          temp.desc = data.desc;
          temp.icon = data.icon;
          temp.owner = data.owner;
          temp.command = data.command;
          temp.agrs = data.agrs;
          temp.label = data.label;
          temp.envs = data.envs;
          temp.Resource = data.resource;
          temp.os = data.os;
          temp.arch = data.arch;
          temp.createTime = data.create_time;
          temp.classifyName = data.classifyName;
          this.tableDatas = temp;

          this.operatingRecord(data.name);
        }
      });
    },

    submit() {
      let inputData = this.itemsParameterPush;
      let outputData = this.itemsParameterOut;
      this.algIcone = true;
      this.warningModal = false;
      let id = this.algorithmList.id;
      let path = this.$api.modelApi.updateImageMetaData + id;
      // this.algorithmList.classifyId=this.test[0];
      this.algorithmList.classifyId = this.test[this.test.length - 1];
      let param = this.algorithmList;
      this.http.post(path, param).then(res => {
        if (res.data.success) {
          this.onUpload(event);
          this.$Message.success("保存成功");
          this.algIcone = false;
        } else {
          this.$Message.success(res.Message);
        }
      });
    },
    operatingRecord(name) {
      let self = this;
      let path = this.$api.modelApi.operatingRecord;
      let param = {
        operation: "创建算法：" + name,
        taskStatus: 5,
        type: 2
      };
      this.http.post(path, param).then(res => {
        if (res.data.code == 0) {
          console.log("记录成功");
        } else {
          console.log(res.message);
        }
      });
    },
    // 就是一个通过数结构和id 获取对应节点的方法
    familyTree(arr1, id) {
      var temp = [];
      var forFn = function(arr, id) {
        for (var i = 0; i < arr.length; i++) {
          var item = arr[i];
          if (item.id === id) {
            temp.push(item);
            forFn(arr1, item.parentId);
            break;
          } else {
            if (item.children) {
              forFn(item.children, id);
            }
          }
        }
      };
      forFn(arr1, id);
      return temp;
    },
    // 编辑算法
    write(row) {
      this.algorithmList = {};
      let algorithmGroup = [];
      let itemArr = this.familyTree(this.treeData, row.classify_id);
      if (itemArr.length < 1) {
        this.$Message.warning("请选择要迁移到的算法分类");
        return;
      }
      debugger;
      algorithmGroup.push(itemArr[0].pid);
      algorithmGroup.push(itemArr[0].id);
      // 将反显用数组赋给test
      this.test = algorithmGroup;
      this.algIcone = false;
      this.clickId = row.id;
      this.warningModal = true;
      this.getAlgIcon(row);
      this.algorithmList = row;
      let task = row.task;
      let newTask = [];
      this.algGroupId = [row.classifyId];

      newTask = JSON.parse(task);
      let dataList = newTask["input-parameters"];
      let outdataList = newTask["output-parameters"];
      let newData = [];
      for (var i = 0; i < dataList.length; i++) {
        let tempData = {};
        tempData.label = dataList[i].label;
        tempData.type = dataList[i].type.name;
        tempData.desc = dataList[i].desc;
        tempData.classifyId = dataList[i].classifyId;
        newData.push(tempData);
      }
      let newOutData = [];
      for (var i = 0; i < outdataList.length; i++) {
        let tempDataOut = {};
        tempDataOut.label = outdataList[i].label;
        tempDataOut.type = outdataList[i].type.name;
        if (outdataList[i].desc == undefined) {
          tempDataOut.desc = "";
        } else {
          tempDataOut.desc = outdataList[i].desc;
        }
        newOutData.push(tempDataOut);
      }
      this.itemsParameterPush = newData;
      this.itemsParameterOut = newOutData;
    },
    //查询算法图标
    getAlgIcon(row) {
      let self = this;
      let path = this.$api.modelApi.getAlgIcone;
      let algId = row.algId;
      let version = row.version;
      self.imgAlgId = row.algId;
      self.imgVersion = row.version;
      let params = {
        algId: algId,
        version: version
      };
      this.http.get(path, params).then(res => {
        if (res.data.success == true) {
          // console.log("base64", res.data.data);
          //base64转为图片
          if (res.data.data == null) {
            self.base64str = "暂无图标";
          } else {
            self.base64str = "data:image/png;base64," + res.data.data;
          }
        } else {
          // this.$Message.error(res.data.message);
        }
      });
    },
    // 算法编辑接口
    move(row) {
      this.removeModal = true;
      this.treeData3 = this.treeData;
      this.algorithmList = row;
      this.clickId = row.id;
      // console.log("算法管理迁移");
    },
    delModel(item) {
      this.delModelShow = true;
      this.clickId = item.id;
    },
    delModelShowCancle() {
      this.delModelShow = false;
    },
    delModelOk() {
      let _this = this;
      this.delModelShow = false;
      let path = this.$api.modelApi.DeleteImageMetaDataById + this.clickId;
      this.http.get(path).then(res => {
        if (res.data.success == true) {
          this.$Message.success(res.data.message);
          this.getMetaDataList(_this.modelCateId);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    update() {
      this.updateShow = true;
      this.upData.name = this.$refs.tree.getSelectedNodes()[0].title;
    },
    delTreeNode() {
      this.delShow = true;
      this.clickId = this.$refs.tree.getSelectedNodes()[0].id;
      this.parentId = this.$refs.tree.getSelectedNodes()[0].pid;
      this.flag = this.parentId;
      if (this.$refs.tree.getSelectedNodes()[0].children == null) {
        this.children = false;
      } else {
        this.children = true;
      }
    },

    delOk() {
      let self = this;
      if (self.modelCateId == "" || self.modelCateId == null) {
        self.$Message.warning("请先选择要删除的数据");
        return;
      }
      if (self.children == true) {
        self.$Message.warning("有子节点不能删除");
        return;
      }
      let path = self.$api.modelApi.delete + "/" + self.modelCateId;
      self.http.get(path).then(res => {
        if (res.data.success) {
          self.delShow = false;
          self.$Message.success("删除成功");
          self.getModelCategoryTree(self.select);
          self.Traversal();
        } else {
          self.$Message.error(res.data.message);
        }
      });
    },
    moveOk() {
      let self = this;
      if (self.moveId == "" || self.moveId == null) {
        this.$Message.warning("请选择要迁移到的算法分类");
        return;
      }
      let path = this.$api.modelApi.move + "/" + self.clickId;
      let param = this.algorithmList;
      param.classifyId = self.moveId;
      this.http.post(path, param).then(res => {
        if (res.data.success) {
          self.getMetaDataList(self.moveId);
          this.$Message.success("迁移成功");
          this.removeModal = false;
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    moveCancel() {
      this.removeModal = false;
    },
    delCancel() {
      this.delShow = false;
    },
    addCatalog() {
      this.addShow = true;
    },
    addTreeNode() {
      this.modelCateId = this.pid;
      this.addShow = true;
    },
    addOk() {
      let self = this;
      let path = this.$api.modelApi.create;
      this.addShow = false;
      if (self.modelCateId == "" || self.modelCateId == null) {
        self.modelCateId == "0";
      }
      self.addData.treeKey = self.select;
      self.addData.parentId = self.modelCateId;
      let param = self.addData;
      this.http.post(path, param).then(res => {
        if (res.data.success) {
          this.$Message.success("创建成功");
          this.getModelCategoryTree(this.select);
          self.Traversal();
        } else {
          this.$Message.error(res.data.message);
        }
      });
      self.addData = {
        name: "",
        treeKey: "",
        parentId: ""
      };
    },
    addCancel() {
      this.addShow = false;
    },
    updateOk() {
      let self = this;
      if (self.modelCateId == "" || self.modelCateId == null) {
        this.$Message.warning("没有选择要更新的节点");
        return;
      }
      let path = this.$api.modelApi.update + "/" + self.modelCateId;
      self.upData.treeKey = self.select;
      self.upData.parentId = self.pid;
      let param = self.upData;
      this.updateShow = false;
      this.http.post(path, param).then(res => {
        if (res.data.success) {
          this.$Message.success("更新成功");
          self.Traversal();
          self.getModelCategoryTree(self.select);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    updateCancel() {
      this.updateShow = false;
    },

    getModelCategoryTree(treeKey) {
      let self = this;
      self.treeData = [];
      let path = this.$api.modelApi.getTree + "/" + treeKey;
      this.http.get(path).then(res => {
        self.loading = false;
        if (res.data.success) {
          self.treeData = res.data.data;
          self.dragSortDdata = res.data.data;
          /**
           * 如果myFlag = -1，关闭树；如果myFlag = i, 展开树，否则关闭树
           */
          for (let i = 0; i < self.treeData.length; i++) {
            if (self.myFlag != -1) {
              // 条件筛选
              if (i == self.myFlag) {
                self.treeData[i].expand = true;
              } else {
                self.treeData[i].expand = false;
              }
            } else {
              self.treeData[i].expand = false;
            }
          }

          if (res.data.data.length > 0) {
            // self.modelCateId = self.treeData[0].id;
            self.name = self.treeData[0].title;
            self.pid = self.treeData[0].pid;
            self.treeData[0].selected = false;
            if (self.treeData[0].children == null) {
              this.children = false;
            } else {
              this.children = true;
            }
          } else {
            self.modelCateId = "0";
            self.pid = "0";
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    getParent(array, childs, ids) {
      for (let i = 0; i < array.length; i++) {
        let item = array[i];
        if (item.id === ids) {
          childs.push(item);
          return childs;
        }
        if (item.children && item.children.length > 0) {
          childs.push(item);
          let rs = this.getParent(item.children, childs, ids);

          if (rs) {
            return rs;
          } else {
            let index = childs.indexOf(item);
            if (index > -1) {
              childs.splice(index, 1);
            }
            // childs.remove();
          }
        }
      }
      return false;
    },
    //算法迁移
    selectTree2() {
      let self = this;

      self.moveId = this.$refs.resTree.getSelectedNodes()[0].id;
    },
    // 查询算法
    getMetaDataList(id) {
      let classfyid = id;

      // let path = this.$api.modelApi.imageMetaDataAllListByCondition;
      let path =
        this.$api.modelApi.imageMetaDataListByProcessClassifyId + classfyid;

      let getAxiosData = {
        url: path,
        method: "get"
      };
      let param = {};
      this.$refs.table.getRefreshTable(param, getAxiosData);
    }
  },
  watch: {
    items(newVal, oldVal) {
      this.$nextTick(function() {
        this.GlobalPermissionRender.render();
      });
    },
    searchName(newVal, oldVal) {
      if (newVal.length >= 50) {
        this.$Message.warning("任务名称长度不得超过50个字符");
      }
      if (newVal == "") {
        this.showimgsearchicon = true;
        this.showimgofficon = false;
      } else {
        this.showimgsearchicon = false;
        this.showimgofficon = true;
      }
    },
    currentPage(newVal, oldVal) {
      let self = this;
      this.currentPage = newVal;
      this.getMetaDataList(self.modelCateId);
    },
    pageSize(newVal, oldVal) {
      let self = this;
      this.pageSize = newVal;
      this.getMetaDataList(self.modelCateId);
    },
    addingAlgorithm(v) {
      if (!v) {
        this.reFresh = false;
        /* this.fileList = [];*/
      }
      this.showDataTbale = false;
      this.counter = 0;
    },
    reFresh(v) {
      if (v) this.addingAlgorithm = true;
    },
    menuTree() {
      this.reFresh = false;
      this.$nextTick(() => {
        this.reFresh = true;
      });
    },
    classifyId(newVal, oldVal) {
      this.algorithmList.classifyId = newVal;
    },
    allDataList(newVal) {
      this.dragSortDdata = newVal.data.data.list;
    },
    sortData(newVal) {
      let that = this;
      if (newVal.length && newVal[0] === "table") {
        that.getMetaDataList(that.modelCateId);
      }
      if (newVal.length && newVal[0] !== "table") {
        if (that.currentClickItemId) {
          let flatten = arr => {
            arr.forEach(item => {
              if (item["children"] && item["children"].length) {
                flatten(item["children"]);
              }
              if (item["id"] === that.currentClickItemId) {
                item["children"] = newVal;
                return;
              }
            });
            return arr;
          };
          that.treeData = flatten(that.treeData);
        } else {
          that.treeData = newVal;
        }
      }
    },

    addAlgoPluginModal: {
      handler(val) {
        if (!val) {
          this.$refs.refAddAlgoPluginModal.reset();
        }
      },
      deep: true,
      immediate: true
    },

    editAlgoPluginModal: {
      handler(val) {
        if (!val) {
          this.$refs.refAddAlgoPluginModal.reset();
          // this.$refs.refEditAlgoPluginModal.reset();
        }
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy() {
    this.uploading = false;
    this.uploadingSuccess = false;
  }
};
</script>

<style scoped>
.modelStye {
  display: flex;
  font-size: 14px;
}
.sel {
  width: 80%;
}
.search {
  display: flex;
}
.warningModalStyle {
  width: 500px;
}
.csel {
  width: 360px;
  border: 1px solid #c4c9d0;
  text-align: left;
  border-radius: 3px;
  padding: 0px;
}
.fristSel {
  width: 500px;
  padding: 5px;
  margin: 10px 0px;
}
.inputstyle {
  margin-left: 20px;
  height: 35px;
  width: 230px;
}
.btnstyle {
  width: 90px !important;
  padding-top: 4px;
  height: 35px;
  margin-top: 6px;
  padding: 5px;
}

.algoLook .form-row {
  font-weight: 1000;
}
/* 右侧 */
.cardstyle {
  margin-right: 20px;
  margin-left: 20px;
  margin-top: 19px;
  overflow: auto;
  height: calc(100% - 63px);
}
.browse {
  margin-top: 10px;
  margin-bottom: 10px;
}
.selectFile {
  margin: 0px;
}
.table-responsive {
  height: 100%;
  margin-left: 20px !important;
}
.profress {
  width: 500px;
  height: 15px;
}

/* .btnStyle {
  padding: 3px;
  margin-right: 5px;
} */
.tablestyle {
  margin: 0px;
  border: 1px solid #c4c9d0;
  max-width: 100%;
}
.tablestyle > tr > td {
  width: 150px;
  height: 40px;
  text-align: center;
}
.pt-2,
.py-2 {
  padding-top: 1.5rem !important;
}
/* .ivu-select {
  width: 65%;
  margin-bottom: 10px;
} */
.leftBtn {
  padding-bottom: 3px;
  display: flex;
  justify-content: space-evenly;
  margin-left: 12px;
  margin-top: 4px;
}
.tableTitle {
  padding: 5px;
  font-weight: bold;
  background: rgba(240, 240, 240, 1);
}
.leftBtn .btn {
  width: 35px;
}
.ivu-form-item-content {
  margin-left: 30px;
}
.inputContent {
  margin-left: 15px;
}
.inputTable {
  width: 100%;
}
.outputTable {
  width: 100%;
  height: 300px;
}
.titleTable {
  font-weight: bold;
  border-left: 4px solid #535df4;
  padding-left: 5px;
}
.moveBtn {
  color: #3c6ef0;
}
.leftstyle {
  width: 15%;
  height: 100%;
}
.cbodystyle {
  width: 90%;
  margin-top: 60px;
  margin-bottom: 15px;
  margin-right: 15px;
  margin-left: 20px;
  overflow-y: auto;
}

.deleteBtn {
  color: #eb5454;
}
.middlestyle {
  margin-top: 10px;
}
/* @media screen and (min-width: 1367px) { */
.leftTree {
  width: 280px;
  margin-top: 1px;
}
.leftTree .ivu-tree {
  border-radius: 3px;
  width: 100%;
  overflow-y: auto;
  margin-top: 5px;
}
.leftTree .card-body {
  padding: 0px !important;
}
.rightCard {
  width: 85%;
  margin-left: 10px;
}

.div1style {
  display: flex;
  margin-top: 40px;
}

.cbtnstyle {
  width: 90px;
  height: 35px;
  background-color: #3c6ef0;
}
.cbtnstyle:hover {
  background-color: #698cf7;
}
.change {
  margin-left: 10px;
}
.formstyle {
  width: 50%;
}
.uploadstyle {
  width: 150px;
  margin-top: -12px;
}
.popstyle {
  text-align: center;
  margin: 12px;
  display: flex;
}
.soltstyle {
  color: #e55353;
}
.tablebtnstyle {
  margin-left: 5px;
  color: #329aff;
}
.tablebtnstyle1 {
  margin-left: 5px;
}

.modalBody-algo {
  height: 430px;
}

.formSty {
  background-color: #fbfbfb;
  text-align: end;
  font-weight: normal;
  font-family: "PingFangSC-Regular,PingFang SC";
  font-weight: 400;
  padding-top: 12px;
}
.btns {
  display: flex;
  position: absolute;
  left: 84%;
  top: 15px;
}
.InputText {
  font-weight: normal;
}
.footerBtns .modal-footer {
  justify-content: flex-end;
}

/* ::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  background-color: #d8d8d8;
} */
::-webkit-scrollbar-thumb {
  background-color: #7eb8ee;
}

.changeimg {
  margin-left: -6px;
  color: rgb(2, 40, 88);
}
.changebtn:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.pic_list_box {
  display: flex;
}
.pic_list {
  display: flex;
}
.pic_list_box .upload_btn {
  width: 80px;
  height: 80px;
  padding-left: 15px;
}

.pic_list img {
  width: 80px;
  height: 80px;
  padding-left: 15px;
  padding-bottom: 10px;
}

.algGroup {
  width: 273.5px;
  height: 35px;
}
.algTitle {
  margin-left: 29px;
  margin-right: 9px;
  font-weight: bold;
  padding-top: 8px;
}
.writeMessage {
  text-align: end;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: #151517 !important;
  margin-right: 5px;
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}

.btnRow {
  margin-left: -5px;
}

.bigFileUpload-style {
  margin-top: -66px;
}

.modalBody-algo /deep/ tr {
  vertical-align: middle;
}

.messageTable /deep/ .form-group {
  margin-bottom: 0;
}

.leftTextBtnStyle {
  /* border: none; */
  color: white;
  padding: 2px 8px;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 2px;
  border-radius: 4px;
  cursor: pointer;
}

/deep/.ivu-table td.centerText {
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}
</style>
<style scoped>
.onButton:hover {
  color: white;
}

.fileStatus {
  display: flex;
  margin-left: 15px;
  padding: 5px 0;
}
.statsBox {
  max-height: 300px;
  overflow-y: auto;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.runClass {
  animation-name: rotate;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.fa_color {
  color: #3c6ef0;
}

/*排序弹框*/
.dragSortStyle /deep/ .ivu-modal-body {

  overflow-y: visible;
}
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dragBox {
  padding: 3px 10px 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tempxyz .card-body {
  height: calc(100% - 70px) !important;
}

/deep/.form-control:disabled,
/deep/.form-control[readonly] {
  background-color: #f5f5f5;
}
</style>
<style scoped>
/deep/.ivu-modal-body {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}
</style>



